<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/order">订单</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/rating">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!-- 路由外链 -->
    <!-- <keep-alive> -->
      <router-view :seller="seller"></router-view>
    <!-- </keep-alive> -->
  </div>
</template>

<script>
import {getSeller} from '@/common/js/httpAPI'
import {urlParse} from 'common/js/util';
import header from 'components/header/header';
const ERR_OK = 0;
export default {
  name: 'App',
  components: {
    'v-header': header
  },
  data () {
    return {
      seller: {
        id: (() => {
          let queryParam = urlParse();
          return queryParam.id;
        })()
      }
    };
  },
  created () {
    // 获取商家信息列表
    // this.$http.get('/api/seller?id=' + this.seller.id).then(response => {
    //   response = response.body;
    //   if (response.errno === ERR_OK) {
    //     // this.seller = response.data;
    //     this.seller = Object.assign({}, this.seller, response.data);
    //   }
    // });
    getSeller('/seller/admin').then(result => {
      result = result.data;
      if (result.error === ERR_OK) {
        this.seller = result.data;
        if (!this.seller.score % 1 === 0) {
          this.seller.score = Math.floor(this.seller.score * 100) / 100;
        }
        if (!this.seller.serviceScore % 1 === 0) {
          this.seller.serviceScore = Math.floor(this.seller.serviceScore * 100) / 100;
        }
        if (!this.seller.foodScore % 1 === 0) {
          this.seller.foodScore = Math.floor(this.seller.foodScore * 100) / 100;
        }
        this.seller.infos = this.seller.infos.split(',');
      }
    }).catch(error => {
      console.log(error)
    })
  },
  computed: {
    key () {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    }
  }
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import './common/stylus/mixin.styl';

#app {
  .tab {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-1px(rgba(7, 17, 27, 0.1));

    .tab-item {
      flex: 1;
      text-align: center;

      & > a {
        display: block;
        font-size: 14px;
        color: rgb(77, 58, 93);

        &.active {
          color: rgb(240, 20, 20);
        }
      }
    }
  }
}
</style>>
